<template>
  <ISlideover
    :ok-disabled="form.busy || !resource.authorizations?.update"
    :ok-text="$t('core::app.save')"
    :hide-footer="activeTabIndex === 1"
    :title="resource.title"
    :sub-title="modalSubTitle"
    visible
    form
    static-backdrop
    @submit="updateUsing(form)"
  >
    <template #title="{ title }">
      <div v-if="isReady" class="flex items-center">
        <ActivityStateChange
          class="mr-1 mt-0.5"
          tooltip-placement="bottom"
          :is-completed="resource.is_completed"
          :disabled="!resource.authorizations.update"
          :activity-id="computedId"
          @state-changed="synchronizeResource($event, true)"
        />

        <span>
          {{ title }}
        </span>
      </div>
    </template>

    <div v-if="isReady" class="absolute -top-2 right-5 sm:top-4">
      <ActionSelector
        type="dropdown"
        :ids="actionId"
        :actions="actions"
        :resource-name="resourceName"
        @run="$emit('action-executed', $event)"
      />
    </div>

    <FieldsPlaceholder v-if="!isReady" />

    <div v-else class="mt-6 sm:mt-0">
      <ITabGroup v-model="activeTabIndex">
        <ITabList>
          <ITab :title="$t('activities::activity.activity')" />

          <ITab
            :title="
              $t('comments::comment.comments') +
              ' (' +
              resource.comments_count +
              ')'
            "
            @activated.once="loadComments"
          />
        </ITabList>

        <ITabPanels>
          <ITabPanel>
            <FormFields
              :fields="fields"
              :form="form"
              :resource-id="computedId"
              :resource-name="resourceName"
              @update:field-value="form.fill($event.attribute, $event.value)"
              @set:initial-value="form.set($event.attribute, $event.value)"
            >
              <template #after-deals-field>
                <span class="-mt-2 block text-right">
                  <a
                    href="#"
                    class="link text-sm"
                    @click.prevent="dealBeingCreated = true"
                  >
                    &plus; {{ $t('deals::deal.create') }}
                  </a>
                </span>
              </template>

              <template #after-companies-field>
                <span class="-mt-2 block text-right">
                  <a
                    href="#"
                    class="link text-sm"
                    @click.prevent="companyBeingCreated = true"
                  >
                    &plus; {{ $t('contacts::company.create') }}
                  </a>
                </span>
              </template>

              <template #after-contacts-field>
                <span class="-mt-2 block text-right">
                  <a
                    href="#"
                    class="link text-sm"
                    @click.prevent="contactBeingCreated = true"
                  >
                    &plus; {{ $t('contacts::contact.create') }}
                  </a>
                </span>
              </template>
            </FormFields>

            <MediaCard
              class="mt-5"
              :resource-name="resourceName"
              :resource-id="computedId"
              :media="resource.media"
              :authorize-delete="resource.authorizations.update"
              @deleted="
                synchronizeResource({ media: { id: $event.id, _delete: true } })
              "
              @uploaded="synchronizeResource({ media: [$event] })"
            />
          </ITabPanel>

          <ITabPanel lazy>
            <div class="my-3 text-right">
              <CommentsAdd
                :commentable-id="computedId"
                commentable-type="activities"
                @created="
                  incrementResourceCount('comments_count'),
                    synchronizeResourceSilently({
                      comments: [$event],
                    })
                "
              />
            </div>

            <IOverlay :show="!commentsAreLoaded">
              <CommentsList
                v-if="commentsAreLoaded"
                :comments="resource.comments || []"
                commentable-type="activities"
                :commentable-id="computedId"
                :auto-focus-if-required="true"
                @updated="
                  synchronizeResourceSilently({
                    comments: $event,
                  })
                "
                @deleted="
                  decrementResourceCount('comments_count'),
                    synchronizeResourceSilently({
                      comments: { id: $event, _delete: true },
                    })
                "
              />
            </IOverlay>
          </ITabPanel>
        </ITabPanels>
      </ITabGroup>
    </div>

    <CreateDealModal
      v-model:visible="dealBeingCreated"
      :overlay="false"
      @created="
        handleAssociateableAdded('deals', $event.deal),
          (dealBeingCreated = false)
      "
    />

    <CreateContactModal
      v-model:visible="contactBeingCreated"
      :overlay="false"
      @created="
        handleAssociateableAdded('contacts', $event.contact),
          (contactBeingCreated = false)
      "
      @restored="
        handleAssociateableAdded('contacts', $event),
          (contactBeingCreated = false)
      "
    />

    <CreateCompanyModal
      v-model:visible="companyBeingCreated"
      :overlay="false"
      @created="
        handleAssociateableAdded('companies', $event.company),
          (companyBeingCreated = false)
      "
      @restored="
        handleAssociateableAdded('companies', $event),
          (companyBeingCreated = false)
      "
    />
  </ISlideover>
</template>

<script setup>
import { computed, ref } from 'vue'
import { inject } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute } from 'vue-router'

import ActionSelector from '@/Core/components/Actions/ActionSelector.vue'
import MediaCard from '@/Core/components/Media/ResourceRecordMediaCard.vue'
import { useDates } from '@/Core/composables/useDates'
import { useForm } from '@/Core/composables/useForm'

import { useComments } from '@/Comments/composables/useComments'

import ActivityStateChange from './ActivityStateChange.vue'

const props = defineProps({
  resource: { required: true, type: Object },
  fields: { required: true, type: Array },
  isReady: { required: true, type: Boolean },
  updateUsing: { required: true, type: Function },
})

defineEmits(['action-executed'])

const resourceName = Innoclapps.resourceName('activities')

const { t } = useI18n()
const route = useRoute()

const { form } = useForm()
const { localizedDateTime } = useDates()

const dealBeingCreated = ref(false)
const contactBeingCreated = ref(false)
const companyBeingCreated = ref(false)
const activeTabIndex = ref(route.query.comment_id ? 1 : 0)

const computedId = computed(() => props.resource.id)
const actionId = computed(() => computedId.value || [])
const actions = computed(() => props.resource.actions || [])

const modalSubTitle = computed(() => {
  if (!props.isReady) return ''

  return `${t('core::app.created_at')}: ${localizedDateTime(
    props.resource.created_at
  )} - ${props.resource.creator.name}`
})

const synchronizeResourceSilently = inject('synchronizeResourceSilently')
const synchronizeResource = inject('synchronizeResource')
const hydrateFields = inject('hydrateFields')
const incrementResourceCount = inject('incrementResourceCount')
const decrementResourceCount = inject('decrementResourceCount')

const { getAllComments, commentsAreLoaded } = useComments(
  computedId,
  resourceName
)

async function loadComments() {
  synchronizeResourceSilently({ comments: await getAllComments() })
  commentsAreLoaded.value = true
}

function handleAssociateableAdded(attribute, record) {
  synchronizeResource({ [attribute]: record })
  hydrateFields({ [attribute]: record })
  form[attribute].push(record.id)
}
</script>
